import SearchBox from './SearchBox';
import MiniMask from '../miniMask';

import './HeaderBar.css';
import { ReactComponent as LilililiiLogo } from "../../common/svg/lilililiLogo.svg";
import { ReactComponent as BilibiliImg } from '../../common/svg/bilibili.svg';
import { ReactComponent as MessageImg } from '../../common/svg/message.svg';
import { ReactComponent as TweetImg } from '../../common/svg/tweet.svg';
import { ReactComponent as FavlistImg } from '../../common/svg/favlist.svg';
import { ReactComponent as UploadImg } from '../../common/svg/upload.svg';
import { ReactComponent as UserCenterSvg } from "../../common/svg/usercenter.svg";
import { ReactComponent as RightBtnSvg } from "../../common/svg/right-btn.svg";
import { ReactComponent as LogoutSVg } from "../../common/svg/logout.svg";
import avatar from '../../common/img/avatar.png';
import { Link } from 'react-router-dom';
import { useState } from 'react';

function HeaderBar({ subClass, isSearchBoxVisible, loginAction }) {
  const [timer, setTimer] = useState(null);
  const [isPop, setIsPop] = useState(false);

  const handleMouseEnter = () => {
    let avatarContainer = document.querySelector(".avatar-container");
    avatarContainer.setAttribute("class", "avatar-container big-avatar");
    let popOver = document.querySelector(".right-entry .v-popover");
    popOver.setAttribute("class", "v-popover");
    popOver.style.display = "block";
  }

  const handleMouseLeave = () => {
    let avatarContainer = document.querySelector(".avatar-container");
    avatarContainer.setAttribute("class", "avatar-container");
    let popOver = document.querySelector(".right-entry .v-popover");
    popOver.setAttribute("class", "v-popover leave");
    setTimer(setTimeout(() => popOver.style.display = "none", 190));
    setTimeout(() => setTimer(null), 190);
  }

  const handleLogout = () => {
    handleMouseLeave();
    loginAction.action(false);
  }

  return (
    <div className={`lili-header${subClass}`}>
      <div className="header__bar">
        <ul className="left-entry">
          <li>
            <Link to="/" className='entry-title'>
              {
                subClass == "" ? <BilibiliImg /> : <LilililiiLogo />
              }
              <span>首页</span>
            </Link>
          </li>
          <li className='nav-entry'>
            <Link to="/douga" className='default-entry'>
              <span>动画</span>
            </Link>
          </li>
          <li className='nav-entry'>
            <Link to="/game" className='default-entry'>
              <span>游戏</span>
            </Link>
          </li>
        </ul>
        <div className="search-container">
          <SearchBox visible={isSearchBoxVisible} />
        </div>
        <ul className="right-entry">
          <li className="header-avatar-wrap"
            onMouseEnter={() => loginAction.payload ? setTimeout(handleMouseEnter, 400) : ""}
            onMouseLeave={() => loginAction.payload ? setTimeout(handleMouseLeave, 400) : ""}>
            <div className="avatar-container">
              {loginAction.payload ?
                (<Link to="/space" className='header-entry-mini'>
                  <div className="v-img">
                    <img src={avatar} alt="" />
                  </div>
                </Link>)
                :
                (<div className="header-login-entry" onClick={() => setIsPop(true)} >
                  <span> 登录 </span>
                </div>)
              }
            </div>
            <div className="v-popover">
              <div className="v-popover-content">
                <div className="avatar-panel-popover">
                  <div className="nickname-item">
                    <Link to="/space" className="nickname">
                      <span>珑琦Ronki</span>
                    </Link>
                  </div>
                  <div className="pannel-item">
                    <Link to="/user" className="title">
                      <UserCenterSvg />
                      <span>个人中心</span>
                    </Link>
                    <RightBtnSvg />
                  </div>
                  <div className="pannel-item">
                    <Link to="/t" className="title">
                      <FavlistImg />
                      <span>收藏</span>
                    </Link>
                    <RightBtnSvg />
                  </div>
                  <div className="pannel-item">
                    <Link to="/t" className="title">
                      <TweetImg />
                      <span>动态</span>
                    </Link>
                    <RightBtnSvg />
                  </div>
                  <div className="pannel-item" onClick={handleLogout}>
                    <p className="title logout">
                      <LogoutSVg />
                      <span>退出登录</span>
                    </p>
                    <RightBtnSvg />
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <Link to="/message" className='right-entry-wrap'>
              <MessageImg />
              <span>消息</span>
            </Link>
          </li>
          <li>
            <Link to="/t" className='right-entry-wrap'>
              <TweetImg />
              <span>动态</span>
            </Link>
          </li>
          <li>
            <Link to="/favlist" className='right-entry-wrap'>
              <FavlistImg />
              <span>收藏</span>
            </Link>
          </li>
          <li>
            <Link to="/upload">
              <div className="upload-entry">
                <UploadImg />
                <span style={{ color: "#fff" }}>投稿</span>
              </div>
            </Link>
          </li>
        </ul>
      </div>
      <MiniMask isPop={isPop} setIsPop={setIsPop} loginAction={loginAction} />
    </div>
  );
}

export default HeaderBar;